<template>
    <el-row>
        <el-col :span="5">
            <el-text>客户手机号</el-text>
            <el-input type="text" v-model="search.Phone" style="width:150px" clearable/>
        </el-col>
        <el-col :span="7">
            <el-text>订单状态</el-text>
            <el-select v-model="search.OrderStatus" placeholder="请选择订单状态" style="width:200px" clearable>
               <el-option v-for="item in status" :label="item.typeName" :value="item.typeId" />
            </el-select>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="SelectData" >
                查询
            </el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderId" label="订单ID" width="100" />
      <el-table-column prop="orderCode" label="订单编号" width="100" />
      <el-table-column prop="customerName" label="客户姓名" width="100" />
      <el-table-column prop="phone" label="客户手机号" width="100" />
      <el-table-column prop="amount" label="金额" width="100" >
        <template #default="{row}">
          ￥{{ row.amount.toFixed(2) }}
        </template>
        </el-table-column>
      <el-table-column prop="checkInDate" label="入店日期" width="150" >
        <template #default="{row}">
            {{ moment(row.checkInDate).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        </el-table-column>
      <el-table-column prop="checkOutDate" label="离店日期" width="150" >
        <template #default="{row}">
            {{ moment(row.checkOutDate).format('YYYY-MM-DD HH:mm:ss')  }}
        </template>
        </el-table-column>
      <el-table-column prop="remark" label="备注" width="100" />
      <el-table-column prop="orderStatus" label="订单状态" width="100" >
        <template #default="{row}">
            <el-tag
      :type="row.orderStatus==1?'success':'info'"
      effect="dark"
      size="large"
    >
     {{ getStatus(row.orderStatus) }}
    </el-tag>
        </template>
    </el-table-column>

      <el-table-column  label="操作" >
        <template #default="{row}">
            <el-button type="primary" @click="payOrder(row.orderCode)" v-if="row.orderStatus==1">
                付款
            </el-button>
            <el-button type="warning" @click="backOrder(row.orderCode)" v-if="row.orderStatus==2">
                退款
            </el-button>
            <el-button type="danger" @click="delOrder(row.orderId)">删除</el-button>
            <el-button type="success" @click="upOrder(row.orderId)">编辑</el-button>
        </template>
        </el-table-column>
    </el-table>
    <table>
        <tr>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 3, 5, 9]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    共{{ page.totalCount }}条数据,每页{{ page.PageSize }}条数据
    第{{ page.PageIndex }}/{{ page.totalPage }}页
    </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 3, 5, 9]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button type="primary" @click="handleCurrentChange(1)" :disabled="page.PageIndex==1">
        首页
    </el-button>
    </el-pagination>
            </td>
            <td>
                <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 3, 5, 9]"
      :background="true"
      layout="slot, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button type="primary" @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage">
        尾页
    </el-button>
    </el-pagination>
            </td>
        </tr>
    </table>
  </template>
  
  <script lang="ts" setup>
  import {ref,onMounted,reactive} from 'vue'
  import axios from 'axios'
  import moment from 'moment';
  import { ElMessage,ElMessageBox  } from 'element-plus'
  import {useRouter} from 'vue-router'
  const router=useRouter();
  import {useGoodStore} from '@/stores/counter'
  const useStore=useGoodStore();

  const payOrder=(orderCode:string)=>{
    ElMessageBox.confirm(
    '确定付款吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios.post('/api/Pay/PagePay?OrderCode='+orderCode)
        .then(res=>{
            document.write(res.data);
        })
    })
  }

  const backOrder=(orderCode:string)=>{
    ElMessageBox.confirm(
    '确定退款吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios.post('/api/Pay/Refund?orderCode='+orderCode)
        .then(res=>{
            if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
            loadData();
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
        })
    })
  }


  const upOrder=(oid:number)=>{
    router.push('/editOrder');
    useStore.oid=oid;
  }

  const delOrder=(oid:number)=>{
    ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios.delete('/api/Order/OrderDel',{
        params:{
            oid:oid
        }
    })
    .then(res=>{
        if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
            loadData();
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
    })
    })
  }

  const upState=(oid:number)=>{
    axios.get('/api/Order/OrderState',{
        params:{
            oid:oid
        }
    })
    .then(res=>{
        if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
            loadData();
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
    })
  }

  const handleSizeChange = (val: number) => {
  page.PageSize=val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  page.PageIndex=val;
  loadData();
}
const getStatus=(status:number)=>{
    switch(status)
    {
        case 1: return '待支付'; break;
        case 2: return '已支付'; break;
        case 3: return '已发货';break;
        case 4: return '已收货';break;
        case 5: return '已完成';break;
        case 6: return '已取消';break;
        case 7: return '已退款';break;
    }
}
  
 interface Order{
    orderId: number,
        orderCode: string,
        customerName: string,
        phone: string,
        amount: number,
        checkInDate: Date,
        checkOutDate: Date,
        remark: string,
        orderStatus: number
 }
  const tableData = ref<Order[]>([])
 const page = reactive({
    PageIndex:1,
    PageSize:5,
    totalCount:0,
    totalPage:0
 })
 const search=reactive({
    Phone:"",
    OrderStatus:""
 })
 onMounted(()=>{
    loadData();
    loadStatus();
 })
 const loadData=()=>{
    axios.get('/api/Order/GetOrderByPage',{
        params:{
            PageIndex:page.PageIndex,
            PageSize:page.PageSize,
            Phone:search.Phone,
            OrderStatus:search.OrderStatus
        }
    })
    .then(res=>{
        if(res.data.isSuc)
        {
            tableData.value=res.data.data.data;
            page.totalCount=res.data.data.totalCount;
            page.totalPage=res.data.data.totalPage;
        }
    })
 }
 
 const status=ref([{
    typeId: 0,
      typeName: ""
 }]);
 const loadStatus=()=>{
    axios.get('/api/Order/GetOrderStatus')
    .then(res=>{
        if(res.data.isSuc)
        {
            status.value=res.data.data;
        }
    })
 }
 const SelectData=()=>{
    page.PageIndex=1;
    loadData();
 }
  </script>
  